<template>
<div>
  <!--  签到管理  -->
<!--  <el-page-header @back="goBack" title="行政" :content="headerContent" ></el-page-header>-->

  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <el-tabs  v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="签到管理" name="admSigninrecor">

      <!--    高级查询-->
      <el-row>
        <el-form :inline="true" :model="admSigninrecorForm" >

          <el-col :span="2.5">
            <el-form-item>
              <el-input v-model="admSigninrecorForm.userRealname" placeholder="执业人员"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item label="开始时间:">
              <el-date-picker
                  v-model="admSigninrecorForm.StartSigninrecordSign"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss "
                  placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item label="结束时间:">
              <el-date-picker
                  v-model="admSigninrecorForm.EndSigninrecordSign"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss "
                  placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item>
              <el-select v-model="admSigninrecorForm.classify" placeholder="请选择活动区域">
                <el-option label="签到类型" value=""></el-option>
                <el-option label="上班签到" value="1"></el-option>
                <el-option label="会议签到" value="2"></el-option>
                <el-option label="外勤签到" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" plain @click="queryAdmSigninrecor" icon="el-icon-search">检索</el-button>
            </el-form-item>
          </el-col>


        </el-form>

      </el-row>


      <el-table
          :data="admSigninrecorData"
          style="width: 100%">
        <el-table-column
            prop="classify"
            :formatter="zhuanhuanzhi"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="userRealname"
            label="签到人">
        </el-table-column>
        <el-table-column
            prop="signinrecordSignDate"
            label="签到日期">
        </el-table-column>
        <el-table-column
            prop="signinrecordSignTime"
            label="签到时间">
        </el-table-column>
        <el-table-column
            prop="signinrecordSite"
            label="签到地点">
        </el-table-column>

      </el-table>


      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[2, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
      </el-pagination>



    </el-tab-pane>

    <el-tab-pane label="签到统计" name="admSigninrecorTongJi">
      <!--    -------------------------------------------------------------------------------------------------          -->
      <!--    -------------------------------------------------------------------------------------------------          -->
      <!--    -------------------------------------------------------------------------------------------------          -->

      <!--    高级查询-->
      <el-row>
        <el-form :inline="true" :model="admSigninrecorTJForm" >

          <el-col :span="2.5">
            <el-form-item>
              <el-input v-model="admSigninrecorTJForm.userRealname" placeholder="执业人员"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item label="开始时间:">
              <el-date-picker
                  v-model="admSigninrecorTJForm.StartSigninrecordSign"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="2.5">
            <el-form-item label="结束时间:">
              <el-date-picker
                  v-model="admSigninrecorTJForm.EndSigninrecordSign"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

<!--          <el-col :span="2">-->
<!--            <el-form-item>-->
<!--              <el-select v-model="admSigninrecorTJForm.classify" placeholder="请选择活动区域">-->
<!--                <el-option label="签到类型" value=""></el-option>-->
<!--                <el-option label="上班签到" value="1"></el-option>-->
<!--                <el-option label="会议签到" value="2"></el-option>-->
<!--                <el-option label="外勤签到" value="3"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

          <el-col :span="2">
            <el-form-item>
              <el-button type="primary" plain @click="queryAdmSigninrecorTJ" icon="el-icon-search">检索</el-button>
            </el-form-item>
          </el-col>


        </el-form>

      </el-row>


      <el-table
          :data="admSigninrecorTJData"
          style="width: 100%">
        <el-table-column
            prop="userRealname"
            label="签到人">
        </el-table-column>
        <el-table-column
            prop="signinrecordSign"
            label="签到日期">
        </el-table-column>

        <el-table-column
            :formatter="qdTj"
            prop="qd"
            label="签到">
        </el-table-column>

        <el-table-column
            :formatter="qtTj"
            prop="qt"
            label="签退">
        </el-table-column>

      </el-table>


      <el-pagination
          @size-change="handleSizeTJChange"
          @current-change="handleCurrentTJChange"
          :page-sizes="[2, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTJData.total">
      </el-pagination>

      <!--    -------------------------------------------------------------------------------------------------          -->
      <!--    -------------------------------------------------------------------------------------------------          -->
      <!--    -------------------------------------------------------------------------------------------------          -->


    </el-tab-pane>

  </el-tabs>

</div>
</template>

<script>
export default {
  name: "AdmSigninrecor",
  data(){
    return{
      pageTJData:{}, // 统计分页数据
      pageData:{}, // 分页数据
      admSigninrecorData:[], // 查询数据
      headerContent:"签到管理",//页头显示
      activeName:"admSigninrecor", // 默认显示
      admSigninrecorForm:{
        pageSize:'2',
        pageCur:"1",

      }, // 高查 表单 数据
      admSigninrecorTJForm:{
        typeT:"tj",
        pageSize:'2',
        pageCur:"1",
      }, // 统计
      admSigninrecorTJData:[], // 统计数据
    }
  },
  created() {
this.queryAdmSigninrecor()
this.queryAdmSigninrecorTJ() // 签到统计
  },
  methods:{
    handleClick(tab){
      tab.name=="admSigninrecor"?this.headerContent="签到管理":this.headerContent="签到统计"
    },
    goBack(){this.$router.go(-1)},
    queryAdmSigninrecor(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("admSigninrecor",{params:this.admSigninrecorForm})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.pageData = res.data.data
        this.admSigninrecorData = res.data.data.list
      })
      .catch()
    },
    queryAdmSigninrecorTJ(){// 统计查询
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("admSigninrecor",{params:this.admSigninrecorTJForm})
          .then(res => {
            setTimeout(() => {
              loading.close();
            });
            this.pageTJData = res.data.data
            this.admSigninrecorTJData = res.data.data.list
          })
          .catch()

    },
    handleSizeChange(val){
      this.admSigninrecorForm.pageSize=val
      this.queryAdmSigninrecor();
    },
    handleCurrentChange(val){
      this.admSigninrecorForm.pageCur=val
      this.queryAdmSigninrecor()

    },
    handleSizeTJChange(val){
      this.admSigninrecorTJForm.pageSize=val
      this.queryAdmSigninrecorTJ();
    },
    handleCurrentTJChange(val){
      this.admSigninrecorTJForm.pageCur=val
      this.queryAdmSigninrecorTJ()

    },
    zhuanhuanzhi(row){
      return row.classify=="1"?"上班签到":row.classify=="2"?"会议签到":"外勤签到"
    },
    qdTj(val){
      return val.qd=='1'?'✔':'✖'
    },
    qtTj(val){
      return val.qt=='1'?'✔':'✖'
    },

  }
}
</script>

<style scoped>
.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}
</style>